<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <h3 style="margin: 20px 0;">商品详情</h3>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="goodsId" label="商品ID" width="180"></el-table-column>
      <el-table-column prop="goodsName" label="商品名称" width="180"></el-table-column>
      <el-table-column prop="goodsImg" label="商品图片" width="180"></el-table-column>
      <el-table-column prop="goodsMarketPrice" label="商品市场价" width="180px"></el-table-column>
      <el-table-column prop="goodsPrice" label="商品单价" width="180px"></el-table-column>
      <el-table-column prop="goodsWarnTock" label="商品预警库存" width="180px"></el-table-column>
      <el-table-column prop="goodsStock" label="商品总库存" width="180px"></el-table-column>
      <el-table-column prop="categoryId" label="类别ID" width="180px"></el-table-column>
      <el-table-column prop="brandId" label="品牌ID" width="180px"></el-table-column>
      <el-table-column prop="goodsState" label="商品状态" width="180px"></el-table-column>
      <el-table-column prop="goodsDesc" label="商品描述" width="180px"></el-table-column>
      <el-table-column prop="goodsParams" label="商品参数规格" width="180px"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
          <el-dialog
              title="编辑商品"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose">
            <div style="margin: 20px;"></div>
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
              <el-form-item label="商品ID">
                <el-input v-model="formLabelAlign.goodsId" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="商品名字">
                <el-input v-model="formLabelAlign.goodsName"></el-input>
              </el-form-item>
              <el-form-item label="商品图片">
                <el-input v-model="formLabelAlign.goodsImg"></el-input>
              </el-form-item>
              <el-form-item label="商品市场价">
                <el-input v-model="formLabelAlign.goodsMarketPrice"></el-input>
              </el-form-item>
              <el-form-item label="商品单价">
                <el-input v-model="formLabelAlign.goodsPrice"></el-input>
              </el-form-item>
              <el-form-item label="商品预警库存">
                <el-input v-model="formLabelAlign.goodsWarnTock"></el-input>
              </el-form-item>
              <el-form-item label="商品总库存">
                <el-input v-model="formLabelAlign.goodsStock"></el-input>
              </el-form-item>
              <el-form-item label="类别ID">
                <el-input v-model="formLabelAlign.categoryId"></el-input>
              </el-form-item>
              <el-form-item label="品牌ID">
                <el-input v-model="formLabelAlign.brandId"></el-input>
              </el-form-item>
              <el-form-item label="商品状态">
                <el-input v-model="formLabelAlign.goodsState"></el-input>
              </el-form-item>
              <el-form-item label="商品描述">
                <el-input v-model="formLabelAlign.goodsDesc"></el-input>
              </el-form-item>
              <el-form-item label="商品参数规格">
                <el-input v-model="formLabelAlign.goodsParams"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
          </el-dialog>

          <el-button
              size="mini"
              type="danger"
              @click="openDeleteConfirm(scope.row.goodsId)">删除</el-button>
        </template>


      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Common from "@/views/common/Common"
export default {

  data() {
    return {
      dialogVisible: false,
      labelPosition: 'right',
      formLabelAlign: {
        goodsId: '',
        goodsName: '',
        goodsImg: '',
        goodsMarketPrice: '',
        goodsPrice: '',
        goodsWarnTock: '',
        goodsStock: '',
        categoryId: '',
        brandId: '',
        goodsState: '',
        goodsDesc: '',
        goodsParams: '',
      },
      tableData: [],

    }
  },
  methods: {




    handleClose(){
      this.dialogVisible = false;
    },

    openDeleteConfirm(goodsId) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(goodsId);
      }).catch(() => {
      });
    },
    handleEdit(index , row) {
      this.userIndex = index;
      console.log(row.goodsId)
      this.formLabelAlign = {
        goodsId: row.goodsId,
        goodsName: row.goodsName,
        goodsImg: row.goodsImg,
        goodsMarketPrice: row.goodsMarketPrice,
        goodsPrice: row.goodsPrice,
        goodsWarnTock: row.goodsWarnTock,
        goodsStock: row.goodsStock,
        categoryId: row.categoryId,
        brandId: row.brandId,
        goodsState: row.goodsState,
        goodsDesc: row.goodsDesc,
        goodsParams: row.goodsParams,
      };

      this.dialogVisible = true;
    },

    confirm() {
      var that = this
      //网络请求获取数据axios
      let url = Common.data.BASEURI+'/goods/info/updateGoods';
      console.log(url)
      this.axios
          .create({'headers': {'Authorization': "Bearer " + localStorage.getItem('jwt')}})
          .post(url,this.formLabelAlign).then((response) => {
        let json = response.data;
        console.log(json)
        if (json.state == 200) {
          this.$message({
            message: '修改商品成功！',
            type: 'success'
          });
          that.loadGoods()
          this.dialogVisible = false;
        } else {
          this.$message.error(response.data.message);
        }
      })
    },

    handleDelete(goodsId) {
      console.log('将删除商品ID=' + goodsId + "的商品数据....");
      let url = Common.data.BASEURI+'/goods/info/' + goodsId + '/delete';
      this.axios
          .create({'headers': {'Authorization': "Bearer " + localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let json = response.data;
        console.log(json);
        if (json.state == 200) {
          this.$message({
            message: '删除商品成功!',
            type: 'success'
          });
        } else {
          this.$message.error(response.data.message);
        }
        this.loadGoods();
      })
    },

    loadGoods: function () {
      console.log('loadGoods()');
      let url = Common.data.BASEURI+'/goods/info/goodsList';
      console.log('url = ' + url);
      console.log(localStorage.getItem('jwt'));
      this.axios
          .create({'headers': {'Authorization': "Bearer " + localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data);
        let json = response.data;
        if (json.state == 200) {

          this.tableData = json.data;
          console.log('>>>>>>>>>>>>>>>>>>>>>')
          console.log(this.tableData);
        } else {
          this.$message.error(response.data.message);
        }
      });
    }
  },
  created() {
    console.log('vue created');
  },
  mounted() {
    console.log('vue mounted');
    this.loadGoods();
  }
}
</script>

<style scoped>

</style>
